<template>
  <div class="meeting-query-form">
    <el-row :gutter="20">
      <el-col :span="20">
        <el-form :inline="true" ref="dataForm" :model="formData">
          <el-row>
            <el-col :span="6">
              <el-form-item label="会议标题" prop="title">
                <el-input v-model="formData.title" placeholder="请输入会议标题" style="width: 130%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="组织单位" prop="ou">
                <el-input v-model="formData.ou" placeholder="请输入组织单位" style="width: 130%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="会议地点" prop="place">
                <el-input v-model="formData.place" placeholder="请输入会议地点" style="width: 130%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="formData.startTime"
                  type="date"
                  placeholder="选择日期"
                  style="width: 110%">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MeetingQueryForm",
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    // 查询
    handleQuery() {
      this.$emit('query', this.formData)
    },
    // 重置
    handleReset() {
      this.$refs["dataForm"].resetFields()
      this.handleQuery()
    }
  }
}
</script>
<style scoped>
::v-deep.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 0px;
}
</style>
